//
//  Tabs.swift
//  SearchBarView
//
//  Created by liaokylin on 2024/10/13.
//

import SwiftUI

struct Tabs: View {
    @Binding var currentSelect :Int
    let tabsItems:[TabItemValue]
    var body: some View {
        ScrollViewReader{ scrollProxy in
            ScrollView(.horizontal,showsIndicators: false){
                HStack{
                    ForEach(tabsItems) { item in
                        Button(action: {
                            currentSelect = item.id
                        }, label: {
                            HStack {
                                Spacer()
                                Text(item.text)
                                    .frame(maxWidth: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/)
                                    .foregroundStyle(currentSelect == item.id ? Color(hex: "#2c2c2c"):Color(hex:"#707070"))
                                    .padding(EdgeInsets(top: 8, leading: 4, bottom: 10, trailing: 4))
                                    .animation(nil,value:UUID())
                                    .font(.system(size: currentSelect == item.id ? 16 : 17))
                                    .fontWeight(currentSelect == item.id ? .bold : .regular)
                                Spacer()
                            }
                            .background{
                                VStack{
                                    if (currentSelect == item.id) {
                                        Spacer()
                                        Rectangle()
                                           .fill(.black)
                                           .frame(width:12,height: 2)
                                           .padding(.horizontal,6)
                                           .cornerRadius(2)
                                    }
                                }
                            }
                        })
                    }
                }
                .frame(minWidth:UIScreen.main.bounds.width)
            }.onChange(of: currentSelect) {
                withAnimation (.easeInOut){
                    scrollProxy.scrollTo(currentSelect,anchor: .center)
                }
            }
        }
        }
}

